<template>
      <!-- 外层容器 -->
      <!-- 在模板中访问当前实例的数据和函数。。。都不需要this  -->
      <!-- 在配置对象的 函数中是需要this的  -->
      <el-container class="container-layout">
          <!-- 左侧边栏 
            侧边栏折叠
            展开：用图标
            收起时：换图标
          -->
          <!-- :width动态绑定后面可以加数据或js表达式 -->
        <el-aside :width="isOpen?'200px':'64px'">
            <!-- logo -->
            <div class="logo" :class="{'mini_logo':!isOpen}"></div>
            <!-- 导航菜单 -->
            <!-- 导航菜单 
                当前菜单默认是没有路由功能的
                需求：点击菜单实现陆游的跳转
                 router属性：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
            -->
            <!-- :default-active=""动态绑定 取出当前路由的路径赋值给属性 -->
            <el-menu
                router
                style="border-right:none"
                :collapse="!isOpen"
                :collapse-transition="false"
                :default-active="$route.path"
                background-color="#002233"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item index="/">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/article">
                <i class="el-icon-document"></i>
                <span slot="title">内容管理</span>
                </el-menu-item>
                <el-menu-item index="/image">
                <i class="el-icon-picture"></i>
                <span slot="title">素材管理</span>
                </el-menu-item>
                <el-menu-item index="/publish">
                <i class="el-icon-s-promotion"></i>
                <span slot="title">发布文章</span>
                </el-menu-item>
                <el-menu-item index="/comment">
                <i class="el-icon-chat-dot-round"></i>
                <span slot="title">评论管理</span>
                </el-menu-item>
                <el-menu-item index="/fans">
                <i class="el-icon-present"></i>
                <span slot="title">粉丝管理</span>
                </el-menu-item>
                <el-menu-item index="/setting">
                <i class="el-icon-setting"></i>
                <span slot="title">个人设置</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <!-- 右侧 -->
        <el-container>
            <!-- 头 -->
            <el-header>
                <!-- 图标 -->
                 <!-- @click="isOpen=!isOpen"数据来回切换 控制收起和展开 图标变化 -->
                <span @click="isOpen=!isOpen" class="icon" 
                :class="{'el-icon-s-fold':isOpen,'el-icon-s-unfold':!isOpen}"></span>
                <!-- 文字 -->
                <span class="text">江苏传智播客科技教育有限公司</span>
                <!-- 下拉菜单 -->
                <!-- 给下拉菜单加command函数 -->
                <el-dropdown @command="clickItem">
                <!-- 默认显示 -->
                <span>
                    <!-- 头像 -->
                    <img class="head" :src="user.photo" alt="">
                    <!-- 用户 -->
                    <span class="name">{{user.name}}</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <!-- 下拉选项 -->
                <el-dropdown-menu slot="dropdown">
                    <!-- click事件没触发  因为给组件绑的任何事件都可看作组件的自定义事件
                        需要组件支持click
                    -->
                    <!-- 解决：把click事件绑定在最终解析的dom标签上 dom标签肯定支持
                        native事件修饰符 加上它会给组件根标签元素绑定原生事件
                        @click.native="setting()"   @click.native="logout()"
                     -->
                     <!-- 还可以使用element提供的下拉菜单提供的自定义事件command 
                        需要给下拉菜单定义command事件
                        在选项上进行添加监听
                        有个自定义事件 command 事件，当你点击下拉选项时候会触发。
                        el-dropdown-item上有个command指令，是可以区分点击的是哪个选项。
                      -->
                    <el-dropdown-item command="setting" icon="el-icon-setting">个人设置</el-dropdown-item>
                    <el-dropdown-item command="logout"  icon="el-icon-unlock">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <!-- 内容区 -->
            <el-main>
                <!-- 二级路由对应的组件显示位置 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
// 导入auth模块
import auth from '@/utils/auth'
import eventBus from '@/eventBus'
export default {
    name:'layout',
    data(){
        return{
            //控制侧边栏的切换
            isOpen:true,
            //用户的名字 用户的头像 从本地token拿取 账号 13911111111 验证码 246810
            user:{
                name:'',
                photo:''
            }
        }
    },
    //组件初始化时需要从本地获取配置信息 生命周期 初始化时会拿取
    // created 生命周期函数 钩子函数的一种 实例已经创建完成之后被调用。
    created(){
        const {name,photo}=auth.getUser()
        this.user={
            name,photo
        }
         // 绑定eventBus的自定义事件
         eventBus.$on('updateUserName', data => {
              this.user.name = data
              console.log(111)
            })
         eventBus.$on('updateUserPhoto', data => {
                this.user.photo = data
                 console.log(1111)
            })
    },
    methods:{
        setting(){
            // 跳转到设置页面
            this.$router.push('/setting')
        },
        logout(){
            //清除用户信息 跳转登录页面
            auth.delUser()
            this.$router.push('/login')
        },
        // 点击任何一个下拉选项触发的函数
        // 注意：绑定该函数的时候不能带括号，因为需要接受默认传参
        clickItem (command) {
        // 需要知道当前点击是哪个选项，然后然后去做对应的业务
        // command是你点击选项，选项上command属性的值
        // 当你command=setting其实你调用setting函数
        // 当你command=logout其实你调用logout函数
        this[command]()
        }
    }
}
</script>

<style scoped lang='less'>
    .container-layout{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
        .el-aside{
            background: #002233;
            .logo{
                width: 100%;
                height: 60px;
                background: #002244 url(../assets/logo_admin.png) no-repeat center/140px auto;
            }
            //小logo图样式 需要在logo下方书写
            .mini_logo{
                background-image: url(../assets/logo_admin_01.png);
                background-size: 36px auto;
            }

        }
         .el-header {
            border-bottom: 1px solid #ddd;
            line-height: 60px;
            .icon {
            font-size: 24px;
            vertical-align: middle;
            }
            .text {
            vertical-align: middle;
            margin-left: 10px;
            }
            .el-dropdown {
            float: right;
            .head {
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }
            .name {
                font-weight: bold;
                color: #333;
                vertical-align: middle;
                margin-left: 5px;
            }
            }
        }
    }
</style>